import { Fragment } from "react";
import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Group, Divider, Text } from "metabase/ui";

export const args = {
  orientation: "horizontal",
};

export const argTypes = {
  orientation: {
    options: ["horizontal", "vertical"],
    control: { type: "inline-radio" },
  },
};

<Meta
  title="Utils/Divider"
  component={Divider}
  args={args}
  argTypes={argTypes}
/>

# Divider

Our themed wrapper around [Mantine Divider](https://v6.mantine.dev/core/divider/).

## Docs

- [Mantine Divider Docs](https://v6.mantine.dev/core/divider/)

## Examples

export const DefaultTemplate = args => <Divider {...args} />;

export const VerticalTemplate = args => (
  <Group>
    <Text>Overview</Text>
    <Divider {...args} />
    <Text>Metrics</Text>
    <Divider {...args} />
    <Text>Segments</Text>
  </Group>
);

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

### Vertical orientation

export const Vertical = VerticalTemplate.bind({});
Vertical.args = {
  orientation: "vertical",
};

<Canvas>
  <Story name="Vertical orientation">{Vertical}</Story>
</Canvas>
